<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  message: string
  type?: 'success' | 'error' | 'warning'
  duration?: number
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

const visible = ref(true)

onMounted(() => {
  setTimeout(() => {
    visible.value = false
    emit('close')
  }, props.duration || 3000)
})
</script>

<template>
  <Transition name="toast">
    <div 
      v-if="visible" 
      class="toast nes-container is-rounded"
      :class="{
        'is-success': type === 'success',
        'is-error': type === 'error',
        'is-warning': type === 'warning'
      }"
    >
      <i 
        class="nes-icon" 
        :class="{
          'star': type === 'success',
          'close': type === 'error',
          'coin': type === 'warning'
        }"
      ></i>
      <span>{{ message }}</span>
    </div>
  </Transition>
</template>

<style scoped>
.toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  min-width: 240px;
  max-width: 80vw;
  border-width: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translate(-50%, -1rem);
}

.nes-icon {
  margin: 0 !important;
}

.toast.is-success {
  border-color: var(--success-color);
}

.toast.is-error {
  border-color: var(--error-color);
}

.toast.is-warning {
  border-color: var(--warning-color);
}

.toast .nes-icon {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
</style> 